<template>
  <div class="membership-center">
    <h1 class="page-title">会员中心</h1>
    
    <div class="membership-content">
      <!-- 会员卡片 -->
      <div class="membership-section">
        <MemberShipCard 
          :user-avatar="userState.userInfo.avatar" 
          :username="userState.userInfo.username" 
          :membership-level="userState.userInfo.membershipLevel" 
          :expiry-date="userState.userInfo.membershipExpiry" 
          :points="userState.userInfo.points" 
          @renew="navigateToUpgrade"
        />
      </div>
      
      <!-- 会员特权概览 -->
      <div class="membership-section">
        <h2 class="section-title">您的特权</h2>
        <div class="privileges-grid">
          <div class="privilege-item" v-if="isPremium">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M3 3h18v18H3V3zm16 14H5V5h14v12z" fill="#ff6b6b"/>
                <path d="M13 12c0 .55-.45 1-1 1s-1-.45-1-1V8h2v4z" fill="white"/>
              </svg>
            </div>
            <span>无广告体验</span>
          </div>
          <div class="privilege-item" v-if="isPremium">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M21 15v4c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-4M17 8l4 4m0 0l-4 4m4-4H3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <span>内容发布特权</span>
          </div>
          <div class="privilege-item" v-if="isPremium">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="white"/>
              </svg>
            </div>
            <span>专属会员徽章</span>
          </div>
          <div class="privilege-item" v-if="userState.userInfo.membershipLevel >= 2">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="3" fill="white"/>
                <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke="white" stroke-width="2"/>
              </svg>
            </div>
            <span>内容曝光提升</span>
          </div>
          <div class="privilege-item" v-if="userState.userInfo.membershipLevel >= 3">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="white" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" fill="white"/>
              </svg>
            </div>
            <span>平台分红资格</span>
          </div>
          <div class="privilege-item" v-if="userState.userInfo.membershipLevel >= 3">
            <div class="privilege-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M3 19V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2zM8 12h8M8 8h8M8 16h4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <span>定制化个人主页</span>
          </div>
        </div>
      </div>
      
      <!-- 积分管理 -->
      <div class="membership-section">
        <h2 class="section-title">积分管理</h2>
        <div class="points-management">
          <div class="points-balance">
            <h3>当前积分</h3>
            <div class="points-display">{{ userState.userInfo.points }}</div>
          </div>
          <div class="points-actions">
            <button class="points-btn" @click="showPointsHistory = !showPointsHistory">
              查看积分历史
            </button>
            <button class="points-btn" @click="navigateToPointsShop">
              积分商城
            </button>
          </div>
        </div>
        
        <!-- 积分历史 -->
        <div class="points-history" v-if="showPointsHistory">
          <div class="history-header">
            <span>时间</span>
            <span>类型</span>
            <span>积分变动</span>
            <span>说明</span>
          </div>
          <div class="history-item" v-for="record in pointsHistory" :key="record.id">
            <span>{{ record.time }}</span>
            <span>{{ record.type }}</span>
            <span :class="{ 'positive': record.points > 0 }">
              {{ record.points > 0 ? '+' : '' }}{{ record.points }}
            </span>
            <span>{{ record.description }}</span>
          </div>
          <div class="no-history" v-if="pointsHistory.length === 0">
            暂无积分记录
          </div>
        </div>
      </div>
      
      <!-- 会员活动 -->
      <div class="membership-section">
        <h2 class="section-title">会员专属活动</h2>
        <div class="activities-grid">
          <div class="activity-card" v-for="activity in memberActivities" :key="activity.id">
            <div class="activity-image">
              <img :src="activity.image" :alt="activity.title" />
            </div>
            <div class="activity-info">
              <h3>{{ activity.title }}</h3>
              <p>{{ activity.description }}</p>
              <div class="activity-date">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" class="date-icon">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#666" stroke-width="2"/>
                  <line x1="16" y1="2" x2="16" y2="6" stroke="#666" stroke-width="2"/>
                  <line x1="8" y1="2" x2="8" y2="6" stroke="#666" stroke-width="2"/>
                  <line x1="3" y1="10" x2="21" y2="10" stroke="#666" stroke-width="2"/>
                </svg>
                {{ activity.date }}
              </div>
              <button class="join-btn" @click="joinActivity(activity.id)">
                立即参与
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { userState, checkMembershipValid } from '../store.js';
import MemberShipCard from '../components/MemberShipCard.vue';

const router = useRouter();
const showPointsHistory = ref(false);

// 模拟积分历史数据
const pointsHistory = ref([]);

// 模拟会员活动数据
const memberActivities = ref([
  {
    id: 1,
    title: '会员专属线上分享会',
    description: '与行业大咖面对面交流，分享创作经验和技巧。',
    date: '2024-12-15 19:30',
    image: 'https://picsum.photos/600/400?random=201'
  },
  {
    id: 2,
    title: '会员内容创作大赛',
    description: '展示你的创作才华，赢取丰厚奖品和积分奖励。',
    date: '2024-12-20 至 2025-01-10',
    image: 'https://picsum.photos/600/400?random=202'
  },
  {
    id: 3,
    title: '会员线下见面会',
    description: '与志同道合的创作者相聚，交流心得，拓展人脉。',
    date: '2025-01-18 14:00',
    image: 'https://picsum.photos/600/400?random=203'
  }
]);

// 计算属性：是否为付费会员
const isPremium = computed(() => {
  return checkMembershipValid();
});

// 导航到升级页面
const navigateToUpgrade = () => {
  router.push('/membership/upgrade');
};

// 导航到积分商城
const navigateToPointsShop = () => {
  // 这里可以导航到积分商城页面
  alert('积分商城功能即将上线');
};

// 参与活动
const joinActivity = (activityId) => {
  alert(`成功参与活动：${activityId}`);
};

// 初始化数据
onMounted(() => {
  // 模拟加载积分历史
  pointsHistory.value = [
    { id: 1, time: '2024-12-01 10:30', type: '获取', points: 50, description: '会员月度奖励' },
    { id: 2, time: '2024-11-28 15:45', type: '获取', points: 20, description: '发布优质内容' },
    { id: 3, time: '2024-11-25 09:12', type: '消费', points: -30, description: '兑换优惠券' },
    { id: 4, time: '2024-11-20 18:20', type: '获取', points: 10, description: '每日签到' }
  ];
});
</script>

<style scoped>
.membership-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  font-size: 32px;
}

.membership-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.membership-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 24px 0;
}

/* 特权网格 */
.privileges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.privilege-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.privilege-item:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.privilege-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 积分管理 */
.points-management {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.points-balance {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.points-balance h3 {
  margin: 0;
  color: #666;
  font-size: 16px;
}

.points-display {
  font-size: 36px;
  font-weight: bold;
  color: #ff6b6b;
}

.points-actions {
  display: flex;
  gap: 12px;
}

.points-btn {
  background: #2196f3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.points-btn:hover {
  background: #1976d2;
}

/* 积分历史 */
.points-history {
  margin-top: 24px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.history-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  padding: 12px 16px;
  background: #f5f5f5;
  font-weight: bold;
  font-size: 14px;
}

.history-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  font-size: 14px;
}

.history-item:last-child {
  border-bottom: none;
}

.history-item .positive {
  color: #4caf50;
  font-weight: bold;
}

.no-history {
  padding: 40px;
  text-align: center;
  color: #999;
}

/* 活动卡片 */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.activity-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.activity-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.activity-info {
  padding: 16px;
}

.activity-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

.activity-info p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.activity-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
}

.date-icon {
  flex-shrink: 0;
}

.join-btn {
  width: 100%;
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.join-btn:hover {
  background: #ee5253;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .privileges-grid {
    grid-template-columns: 1fr;
  }
  
  .points-management {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .history-header,
  .history-item {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
  }
  
  .activities-grid {
    grid-template-columns: 1fr;
  }
}
</style>